import React, { memo, useEffect } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { NavLink } from "react-router-dom";
import ImgBox from "@/components/imgComponent/imgBox";

import { getPersonalize } from "../../store/actionType";

// import {
//     getSongDetailsMessage
// } from '@/pages/player/store/actionType'

import HotRecommendT from "@/components/recommendTitle";

import { HotRecommendWrap, HotRecommendBox } from "./style";

export default memo(function HotRecommend() {
  const dispatch = useDispatch();

  const state = useSelector(
    (state) => ({
      personalizes: state.getIn(["recommend", "personalize"]),
      getSongId: state.getIn(["playlist", "playlists"]),
    }),
    shallowEqual
  );

  useEffect(() => {
    dispatch(getPersonalize());
  }, [dispatch]);

  return (
    <HotRecommendWrap>
      <HotRecommendT copywriter="热门推荐" />
      <HotRecommendBox>
        {state.personalizes.slice(0, 8).map((item, index) => {
          return (
            <div className="hot_box hot_ml_box sprite_covor" key={index}>
              <ImgBox
                name={item.name}
                playCount={item.playCount}
                imgUrl={item.picUrl}
                userId={item.id}
              />
              <NavLink
                to={{
                  pathname: "/discover/playlist/" + item.id,
                }}
                className="h-cov sprite_covor"
                title={item.name}
              >
                {item.name}
              </NavLink>
              <NavLink
                to={{
                  pathname: "/discover/playlist/" + item.id,
                }}
                className="itemName"
                title={item.name}
              >
                {item.name}
              </NavLink>
            </div>
          );
        })}
      </HotRecommendBox>
    </HotRecommendWrap>
  );
});
